<template>
  <div class="PermissMana">
    <div class="head">
      <el-input
        v-model="role.name"
        placeholder="请输入角色英文名"
        style="margin-right:10px"
      ><template v-slot:prepend>ROLE_</template>
      </el-input>
      <el-input
        v-model="role.nameZh"
        placeholder="请输入角色中文名"
        style="margin-right:10px"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addRole"
      >添加角色</el-button>
    </div>

    <div class="main">
      <el-collapse
        v-model="activeName"
        accordion
        @change="changeCollapse"
      >
        <el-collapse-item
          v-for="(role,index) in roles"
          :key="index"
          :title="role.nameZh"
          :name="role.id"
        >
          <el-card class="box-card">
            <div
              slot="header"
              class="clearfix"
            >
              <span>菜单权限</span>
              <el-button
                style="float: right; padding: 3px 0 ;color: red;"
                type="text"
                icon="el-icon-delete"
                @click="deleteRole(role.id)"
              ></el-button>
            </div>
            <div>
              <el-tree
                :props="props"
                :data="menus"
                show-checkbox
                :default-checked-keys="checkedMenus"
                node-key="id"
                ref="tree"
                :key="index"
              >
              </el-tree>
            </div>
            <div class="role-buttom">
              <el-button
                size="mini"
                @click="activeName = -1"
              >取消更新</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="updateRoleMenu(role.id,index)"
              >确认更新</el-button>
            </div>
          </el-card>

        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
</template>


<script>
import _ from 'lodash'
import { initMenus } from '@/utils/menus'
import store from '@/store'
import router from '@/router'
export default {
  name: 'PermissMana',

  data() {
    return {
      role: {},
      roles: [],
      menus: [],
      checkedMenus: [],
      activeName: -1,
      props: {
        label: 'name',
        children: 'children'
      }
    }

  },

  methods: {
    //获取所有权限信息
    initRoles() {
      this.getRequest('system/basic/role/').then(resp => {
        if (resp) {
          this.roles = resp
        }
      })
    },
    //获取所有菜单
    initMenus() {
      this.getRequest('/system/basic/per/menu').then(resp => {
        if (resp) {
          this.menus = resp
        }
      })
    },

    //根据角色id查询菜单id
    getCeckedMenus(rid) {
      this.getRequest(`/system/basic/per/menu/${rid}`).then(resp => {
        if (resp) {
          this.checkedMenus = resp
        }
      })
    },
    //折叠面板切换选项触发
    changeCollapse(name) {
      if (name) {
        //重置checkedMenus
        this.checkedMenus = []
        this.initMenus()
        this.getCeckedMenus(name)
      }
    },
    //更新角色菜单
    updateRoleMenu(rid, index) {
      //获取实时选中的菜单
      let checkedkeys = this.$refs.tree[index].getCheckedKeys(true)
      //判断用户是否更改了菜单权限
      if (_.isEqual(this.checkedMenus, checkedkeys)) {
        this.$message.info('未做更改，无需更新')
        return
      }
      this.putRequest(`/system/basic/per/menu?rid=${rid}`, checkedkeys).then(resp => {
        if (resp) {

          //此处可动态改变菜单数组,目前做简单处理,直接全部清空刷新
          store.commit('initRoutes', [])
          initMenus(router, store)
          this.initMenus()
          this.activeName = -1
        }
      })
    },
    //添加角色
    addRole() {
      this.postRequest('/system/basic/per/role', this.role).then(resp => {
        if (resp) {
          this.role = {}
          this.initRoles()
        }
      })
    },

    //删除角色及其所有菜单权限
    deleteRole(rid) {
      if (this.checkedMenus.length > 0) {
        this.$confirm(`该角色下存在菜单权限,是否确认删除？`, '提示', { type: 'warning' }).then(() => {
          this.deleteRequest(`/system/basic/per/role/${rid}`).then(resp => {
            if (resp) {
              this.initRoles()
            }
          })
        }).catch(() => {
          this.$message.info('已取消')
        })
      } else {
        this.$confirm(`该操作将永久删除角色,是否确认？`, '提示', { type: 'warning' }).then(() => {
          this.deleteRequest(`/system/basic/per/role/${rid}`).then(resp => {
            if (resp) {
              this.initRoles()
            }
          })
        }).catch(() => {
          this.$message.info('已取消')
        })
      }
    },

  },

  mounted() {
    this.initRoles()
  }
}
</script>

<style scoped>
.head {
  width: 45%;
  display: flex;
}
.main {
  width: 50%;
}
.role-buttom {
  display: flex;
  justify-content: right;
}
</style>